<template>
  <div>
    <div id="roseChart" style="height: 600px;width: 600px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {findAgeStructure} from "../../../http/request";
export default {
  name: 'index',
  data() {
    return {
      data: []
    }
  },
  mounted () {
    findAgeStructure().then(res => {
      console.log(res.data)
      for (let r in res.data) {
        console.log(res.data[r])
        var map = {value: res.data[r].人数, name: res.data[r].年龄段}
        this.data.push(map)
      }
      this.drawRoseChart()
    })
  },
  methods: {
    drawRoseChart() {
      let roseChart = echarts.init(document.getElementById('roseChart'))
      roseChart.setOption({
        color: ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
        // title : {
        //   text: '',
        //   subtext: '',
        //   x:'center'
        // },
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          restore: {show: true},
          saveAsImage: {show: true}
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '用户年龄分布',
            type: 'pie',
            // radius: [50, 250],
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            // roseType: 'radius',
            minAngle:10,
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.data
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
